<template>
	<view class="container">
		<image :src="imgData" class="img"> </image>
		<view class="contact"
		@touchstart="onTouchStart"
		@touchmove="onTouchMove"
		@touchend="onTouchEnd"
		:style="'position: relative; top: ' + top + 'rpx;'"
		>
			<!-- <view class="text">识别结果</view>
			<view class="cls">
				<view class="text1"><text>属于</text></view>
				<view class="text2"><text>类型</text></view>
				<view class="text3"><text>可能性</text></view>
			</view>
			<view class="cls" v-for="(item,index) in identify" :class="item.styleClass">
				<view class="text1"><text>{{item.object}}</text></view>
				<view class="text2"><text>{{item.category}}</text></view>
				<view class="text3"><text>{{item.probability}}%</text></view>
			</view> -->
			<view class="line"></view>
			<view class="cot">识别结果</view>
			<view class="cont">
				<view class="cont1">
					<view v-for="(item,index) in identify" class="tit"  :class="{ 'active': selectedIndex == index }"  @click="selected(index)">
						<view class="txt1"><text>{{item.object}}</text></view>
						<view class="txt2"><text>{{item.probability}}%</text></view>
						
					</view>
				</view>
				<view v-for="(item,index) in newData" class="tit-body">
					<view class="tit-head">
						<text class="title" >{{item.object}}</text>
						<text class="type"  :class="item.styleClass">{{item.category}}</text>
					</view>
					<view class="text01"> <text >{{item.txt}}</text></view>
				</view>
				<text></text>
			</view>
		</view>
		
	</view>
</template>

<script>
	
export default {
	
	data() {
		return {
			imgData:'',//拍照传过来的临时图片
			identify:'',//请求后端识别后传过来的数据
			top: -150, // 初始化 top 
			startY: 0, //滑动
			selectedIndex: 0,//选择三个选项中的其中一个
			activeIndex: null,
			newData:[], //选择后显示相应的信息
			color:["colorone","colortwo","colorthree"]
		}; 
	},
	
	onLoad(option){
		console.log(option);
	  this.imgData = JSON.parse(decodeURIComponent(option.img));
		console.log(this.imgData);
		
	},
	onShow() {
	  
		uni.uploadFile({
			url: 'http://43.136.172.73/api/v1/local/recognition/image', // 服务器接口地址
			filePath: this.imgData, // 图片文件路径
			name: 'image', // 后端接收文件的字段名
			  success: (res) => {
					// 上传成功的处理逻辑
					console.log(res);
					const decodedData = JSON.parse(res.data);
					console.log(decodedData);
					this.identify = decodedData;
					for(let i=0;i<5;i++){
						const roundedNumber = this.identify[i].probability.toFixed(2);
						this.identify[i].probability = parseFloat(roundedNumber);
					};
					console.log(this.identify);
					this.identify.splice(this.identify.length - 2, 2);
					console.log(this.identify);
					// this.newData = [ ...this.identify[0] ];
					const styleClasses = ['item-one', 'item-two', 'item-three', 'item-four','item-four'];
					this.identify.map((item, index) => {
					  item.styleClass = styleClasses[index];
					});
					this.selected(0);
					console.log(this.identify);
			  },
			  fail: (err) => {
			  // 上传失败的处理逻辑
			  console.error(err);
			  }
			}); 
		
	},
	onReady() {
		// 将350rpx转换为像素值
		// const top = uni.upx2px(200); 
		// 将滚动条滚动到指定位置
		// uni.pageScrollTo({ scrollTop: top, duration: 0 }); 
		
	},
	methods: {
    onTouchStart(event) {
        this.startY = event.touches[0].clientY;
      },
      onTouchMove(event) {
        const touchY = event.touches[0].clientY;
         const deltaY = touchY - this.startY;
        
        if (deltaY > 0 && this.top < -150) {
          // 向下滑动
          this.top += deltaY * 0.6;
          this.top = Math.min(this.top, -150); // 限制 top 最大值为 -200
        } else if (deltaY < 0 && this.top > -900) {
          // 向上滑动
          this.top += deltaY * 0.6;
          this.top = Math.max(this.top, -900); // 限制 top 最小值为 -600
        }
         
        event.preventDefault();
      },
      onTouchEnd() {
        // 手指离开后的处理逻辑
      },
			selected(index){
				this.selectedIndex = index;
				this.newData = [];
				this.newData.push(this.identify[index])  ;
				if(this.identify[index].object == '纸张'){
					this.newData[0].txt = '纸张是一种常见的材料，用于书写、打印、绘画和包装等各种用途。它通常由纤维素原料，如木浆、草浆或棉纤维制成。纸张可以分为各种类型，包括普通纸、邮票纸、包装纸、艺术纸等。不同类型的纸张具有不同的特性和用途。纸张的质量通常取决于纤维素原料的质量和处理工艺的好坏。 '
				}else if(this.identify[index].object == '衣物'){
					this.newData[0].txt = '衣物是人类用来保护身体、遮挡裸体、装饰和表达个性的物品。它可以包括各种类型的衬衫、裤子、裙子、外套、鞋子、袜子等。衣物的材质通常可以选择棉、丝、麻、毛、合成纤维等不同的纺织品制成。每种材质都具有不同的特性，例如透气性、舒适度和保暖性。'
				}else if(this.identify[index].object == '金属'){
					this.newData[0].txt = '金属是一类常见的物质，具有良好的导电性和导热性，并且通常具有高强度和耐腐蚀等特性。金属可以分为多种类型，包括铁、铜、铝、锌、镍、钢等。不同金属具有不同的物理和化学性质，因此在各个领域都有广泛的应用。金属被广泛用于建筑、汽车制造、电子设备、工具、餐具、珠宝等众多方面。'
				}else if(this.identify[index].object == '玻璃'){
					this.newData[0].txt = '玻璃是一种无定形固体，主要由硅酸盐和其他氧化物组成。它通常是透明或半透明的，具有光滑、硬、易清洁的表面。玻璃可以通过在高温下将熔融的原材料迅速冷却而制成。不同种类的玻璃可以根据其成分和生产过程的不同而具有不同的特性和用途。玻璃在日常生活中有广泛的应用，例如建筑物中的窗户、墙壁、玻璃门；家具中的玻璃桌面、玻璃橱柜；电子设备中的显示屏；餐具中的玻璃杯、碗、盘子等。此外，玻璃还用于制作汽车的挡风玻璃和车窗，以及科学实验室中的试管和仪器。玻璃的特性包括透明性、光学性能、耐化学腐蚀性、耐热性和电绝缘性等。它还可以通过添加染色剂或涂层来改变颜色、增强强度或改善绝缘性能。'
				}else if(this.identify[index].object == '塑料'){
					this.newData[0].txt = '塑料是一种由高分子有机化合物通过聚合反应制得的合成材料。它通常以聚合物为主要组成成分，可通过加工、塑形和各种化学处理方法得到各种形状和性能的材料。塑料通常具有轻质、耐腐蚀、绝缘、耐磨、可塑性强等特点。'
				}
				else if(this.identify[index].object == '药物'){
					this.newData[0].txt = '	药物是指用于预防、治疗和诊断疾病的物质或物质的组合。药物可以具有不同的作用机制，包括改变细胞功能、调节生理过程、抑制病原体等。药物可以分为很多不同的类型，如药片、注射剂、口服液体、外用药物等形式。它们可以由天然物质、合成化合物或生物技术制备而成。'
				}
				
			
				console.log(this.newData);
			},
			toggleActive(index) {
			  this.activeIndex = index;
			}
			
	}
};
</script>
<style lang="scss" scoped>
	.container{
		background-color: #c9c9c9;
		height: 100vh;
		align-items: center;
		overflow: hidden;
	}
	.img{
		width: 750rpx;
		height: 100vh;
		border-radius: 10rpx;
		z-index: 1;
	}
	.contact{
		// margin: 40rpx;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		// border-radius: 50rpx 50rpx 0 0  ;
		// border: 5rpx solid #a9a9a9;
		
		position: relative;
		height: 900rpx;
		width: 750rpx;
		// top: -200rpx;
		z-index: 2;
		border-radius: 100rpx 100rpx 0 0;
		left: 0;
		transition: top 0.4s;
		background-color: #eaeaea;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		
		.line{
			width: 100rpx;
			height: 1rpx;
			border-radius: 10rpx;
			background-color: #d1d1d1;
			border: 4rpx solid #a6a6a6;
			margin-top: 20rpx;
		}
		.cot{
			font-size: 36rpx;
			margin-top:30rpx ;
			align-items: center;
			display: flex;
			justify-content: center;
			width: 600rpx;
			border-radius: 50rpx;
			color: #ffffff;
			background-color: #6b6b6b;
			padding: 8rpx;
			border: 1px solid #edf4ff;
		}
		.cont1{
			width: 750rpx;
			display: flex;
			justify-content: space-between;
			margin-top:20rpx ;
			padding: 0 30rpx 0 30rpx;
			
			.tit{
				width: 225rpx;
				height: 120rpx;
				display: flex;
				border: 1px solid #edf4ff;
				// background-color: #949494;
				// color: #fff;
				border-radius: 30rpx;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				 box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2),-2px -1px 4px rgba(0, 0, 0, 0.2) ;
				
				.txt1{
					font-size: 36rpx;
					margin-bottom: 10rpx;
				}
				.txt2{
					font-size: 36rpx;
				}
			}
			
			
		}
		
		.tit-body{
			
			.tit-head{
				margin: 20rpx;
				margin-left: 40rpx;
				display: flex;
				flex-direction: column;
				.title{
					background-color:  #eaeaea;
					font-size: 40rpx;
					font-weight: bold;
					margin-bottom:20rpx ;
				}
				.type{
					font-size: 37rpx;
					
				}
				
			}
			.text01{
					margin: 20rpx;
					margin-left: 40rpx;
					font-size: 37rpx;
				}
		}
		
		.text{
			width: 100%;
			font-size: 40rpx;
			color: red;
			padding-left: 40%;
			padding-top: 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 4rpx solid #939393;
		}
	}
	.cls{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0rpx 10rpx 0 10rpx;
		border-radius: 20rpx;
		.text1{
			width: 250rpx;
			font-size: 34rpx;
			margin: 10rpx;
		}
		.text2{
			width: 350rpx;
			margin: 10rpx;
		}
		.text3{
			width: 200rpx;
		}
		
	}
	.item-one{
		font-size: 42rpx;
		// color:  #7DCEA0;
	}
	.item-two{
		font-size: 40rpx;
		// color:  #7DCEA0;
	}
	.item-three{
		font-size: 38rpx;
		// color:  #7DCEA0;
	}
	.active {
	  color:  #7DCEA0;
	  // color: white;
		margin-bottom: 50rpx;
	}
</style>
